<template>
  <!-- 专栏菜单 -->
  <div class="box">
    <img class="photo" src="../assets/全域.png" alt="">
    <ul class="list">
      <li v-for=" m in menusNav" :key="m.id">
        <router-link :to="{name:m.name,query:{id:2}}">
          <img class="listImg" :src="m.img" alt="" />
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { getNavs } from '@/api/home';

export default {
  data() {
    return {
      menusNav: [],
    };
  },
  created() {
    this.getNavs();
  },
  methods: {
    async getNavs() {
      const { data } = await getNavs();
      this.menusNav = data;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  padding-top: 10px;
  margin: 0;
  .photo {
    width: 368.5px;
    height: 85.5px;
    margin-left: 5px;
    // border: solid;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      .listImg {
        width: 89px;
        height: 73px;
        margin: 0 auto;
      }
    }
  }
}
</style>
